<template>
  <div class="user-profile">
    <!-- 导航栏 -->
    <!-- 个人信息 -->
    <van-nav-bar class title="个人信息" left-arrow @click-left="$router.back()"></van-nav-bar>
    <input type="file" @change="onChange" hidden ref="file" />
    <van-cell @click="$refs.file.click()" title="头像" is-link>
      <van-image fit="cover" round class="UserImage" :src="profile.photo" />
    </van-cell>
    <van-cell @click="isUpdateNameShow=true" title="昵称" is-link :value="profile.name"></van-cell>
    <van-cell @click="isUpdateSexShow=true" title="性别" is-link :value="profile.gender===0?'男':'女'"></van-cell>
    <van-cell @click="isUpdateBirShow=true" title="生日" is-link :value="profile.birthday"></van-cell>

    <!-- 个人信息 -->

    <!-- 编辑信息 -->
    <van-popup style="height:100%;width:100%" v-model="isUpdateNameShow" position="bottom">
      <editName v-if="isUpdateNameShow" :username="profile.name" @close="isUpdateNameShow=false" />
    </van-popup>
    <!-- 编辑信息/ -->

    <!-- 编辑性别 -->
    <van-popup v-model="isUpdateSexShow" position="bottom">
      <editGender @close="isUpdateSexShow=false" :gender="profile.gender" />
    </van-popup>
    <!-- 编辑性别/ -->

    <!-- 编辑生日 -->
    <van-popup v-model="isUpdateBirShow" position="bottom">
      <editBirthday @close="isUpdateBirShow=false" :birthday="profile.birthday" />
    </van-popup>
    <!-- 编辑生日/ -->

    <!-- 编辑头像 -->
    <van-popup
      class="photo"
      style="height:100%;width:100%"
      v-model="isUpdateImageShow"
      position="bottom"
    >
      <head-image v-if="isUpdateImageShow" :photo="this.photo" @close="isUpdateImageShow=false" />
    </van-popup>
    <!-- 编辑头像/ -->
  </div>
  <!-- 个人信息/ -->
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import { getUserProfile } from '@/api/user'
import editName from './components/editName'
import editGender from './components/editGender'
import editBirthday from './components/editBirthday'
import headImage from './components/headImage'

export default {
  name: 'UserProfile',
  // import引入的组件需要注入到对象中才能使用
  components: { editName, editGender, editBirthday, headImage },
  props: {},
  data () {
    // 这里存放数据
    return {
      profile: {},
      isUpdateNameShow: false,
      isUpdateSexShow: false,
      isUpdateBirShow: false,
      isUpdateImageShow: false,
      photo: null
    }
  },
  // 计算属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    async getProfile () {
      const { data } = await getUserProfile()
      this.profile = data.data
    },

    // 上传图片
    onChange () {
      // 获取文件对象
      // console.log(this.$refs.file.files[0])
      // 基于文章对象获取blob数据
      this.photo = window.URL.createObjectURL(this.$refs.file.files[0])
      this.isUpdateImageShow = true
      this.$refs.file.value = ''
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {
    this.getProfile()
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {

  },
  beforeCreate () { }, // 生命周期 - 创建之前
  beforeMount () { }, // 生命周期 - 挂载之前
  beforeUpdate () { this.getProfile() }, // 生命周期 - 更新之前
  updated () { }, // 生命周期 - 更新之后
  beforeDestroy () { }, // 生命周期 - 销毁之前
  destroyed () { }, // 生命周期 - 销毁完成
  activated () { } // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped lang='less'>
.user-profile {
  .UserImage {
    height: 80px;
    width: 80px;
  }
  .van-popup {
    background-color: whitesmoke;
  }
}
</style>
